<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="名称" v-model="params.name" style="width: 150px;" clearable></el-input>
      <el-input class="filter-item" placeholder="账号" v-model="params.accountNo" style="width: 150px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.status" filterable placeholder="状态" style="width: 120px;" clearable>
        <el-option value="10" label="启用"></el-option>
        <el-option value="20" label="停用"></el-option>
      </el-select>
      <el-select class="filter-item" v-model="params.type" filterable placeholder="类型" style="width: 120px;" clearable>
        <el-option value="10" label="单商户"></el-option>
        <el-option value="20" label="多商户"></el-option>
      </el-select>
      <el-select class="filter-item" v-model="params.confirm" filterable placeholder="认证" style="width: 120px;" clearable>
        <el-option value="10" label="未认证"></el-option>
        <el-option value="20" label="已认证"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getMerchantuserList(1)">搜索</el-button>
      <el-button v-if="btnPower.AddMarketUser" class="filter-item" type="primary" icon="el-icon-document" @click="getButton()">添加</el-button>
    </div>
    <el-table
      :data="merchantuserLists"
      v-loading="listLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="accountNo"
        label="账号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="type"
        :formatter="marketUserType"
        label="类型"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        :formatter="marketUserStatus"
        label="状态"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createAt"
        :formatter="timeFormat"
        label="创建时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modAt"
        :formatter="timeFormat"
        label="修改时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="confirm"
        :formatter="getConfirm"
        label="是否认证"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="210"
        align="center">
        <template slot-scope="scope" align="center">
          <el-button v-if="scope.row.type!=10&&btnPower.RevMarketUser" type="primary" size="small" @click="getButton(scope.row)" >修改</el-button>
          <el-button v-if="btnPower.ResetMarketUser" type="success" size="small" @click="resetPwd(scope.row)" >重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getMerchantuserList" />
    <el-dialog
      :title="popupType==1?'添加商超账号':'编辑商超账号'"
      :visible.sync="popup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="accountNo">
          <el-input v-model="ruleForm.accountNo"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="10">启用</el-radio>
            <el-radio :label="20">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属店铺" prop="shopIds">
          <el-select v-model="ruleForm.shopIds" filterable multiple placeholder="请选择" class="shopIds" style="width: 100%;">
            <el-option
              v-for="item in shopListAll"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { merchantuserList, shopBaseAll, addRevmerchantuser, resetmerchantuserpwd } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'MarketUserList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      shopListAll:[],//所有店铺列表
      merchantuserLists:[],//商超用户列表
      total:0,//总条数
      params:{
        current: 1,
        size: 10,
        del:10,
        status:null,
        type:"20",
        confirm:null
      },//查询条件
      popup:false,//弹窗开启状态
      popupType:1,//1添加  2修改
      ruleForm:{
        name:null,
        accountNo:null,
        status:10,
        shopIds:[]
      },//商超表单
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        accountNo: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        shopIds: [
          {required: true, message: '请选择店铺', trigger: 'change'}
        ],
      }
    }
  },
  created() {
    this.getStart()
    this.getShopListAll()
  },
  methods: {
    getStart(){//初始化
      this.getMerchantuserList()
    },
    getMerchantuserList(e) {//商超用户列表
      if(e==1){this.params.current=1;};
      let _this = this
      let data=this.params
      this.listLoading = true
      merchantuserList(data).then(d=>{
        _this.merchantuserLists = d.data.records;
        _this.total = Number(d.data.total);
      }).finally(d=>{
        _this.listLoading = false
      });
    },
    getShopListAll() {//获取所有店铺列表
      let _this = this;
      let data={};
      data.status=10;
      shopBaseAll(data).then(d=>{
        _this.shopListAll = d.data;
      });
    },
    getButton(e){//点击添加编辑
      if (e) {//修改
        this.popupType=2
        this.ruleForm.id=e.id
        this.ruleForm.name=e.name
        this.ruleForm.accountNo=e.accountNo
        this.ruleForm.status=e.status
        this.ruleForm.shopIds=e.shopIds.split(",")
      }else{//添加
        this.popupType=1
        this.ruleForm.id=null
        this.ruleForm.name=null
        this.ruleForm.accountNo=null
        this.ruleForm.status=10
        this.ruleForm.shopIds=[]
      }
      this.popup=true
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if(valid) {
          _this.getForm()
        } else {
          return false;
        }
      });
    },
    getForm(){//提交表单
      let _this=this
      let data=JSON.parse(JSON.stringify(_this.ruleForm))
      data.shopIds=data.shopIds.join(',')
      data.type=20//多商户参数
      let method = "POST"
      let alerts = "添加"
      if(this.popupType==2){
        method = "PUT"
        alerts = "修改"
      }
      addRevmerchantuser(data,method).then(d=>{
        _this.$message({
          type: 'success',
          message: alerts+'成功!'
        });
        _this.popup=false
        _this.getMerchantuserList(1)
      });
    },
    resetPwd(e){//重置密码
      let _this=this
      this.$confirm('是否重置 '+e.name+' 密码','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
          let data={}
          data.id=e.id;
          resetmerchantuserpwd(data).then(d=>{
            _this.$message({
                type: 'success',
                message: '重置成功!'
            });
            _this.getUserList();
          });
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消'
          });
      });
    },
    getConfirm(row, column, cellValue, index){//是否认证
      if (cellValue == 10) {
        return '未认证';
      } else if (cellValue == 20) {
        return '已认证';
      }
    },

    timeFormat(row, column, cellValue, index) {
      return this.common.getLocalTime(parseInt(cellValue) * 1000);
    },
    marketUserType(row, column, cellValue, index) {//商超用户状态
      if (cellValue == 10) {
        return '单商户';
      } else if (cellValue == 20) {
        return '多商户';
      }
    },
    marketUserStatus(row, column, cellValue, index) {//商超用户状态
      if (cellValue == 10) {
        return '启用';
      } else if (cellValue == 20) {
        return '停用';
      }
    },
  },
  watch:{
    'params.name':function(val){
      let _this=this;
      if(val==""){
        _this.params.name=null
      }
    },
    'params.accountNo':function(val){
      let _this=this;
      if(val==""){
        _this.params.accountNo=null
      }
    },
  }
}
</script>

<style>
.shopIds.el-select .el-tag{ margin-right: 200px;}
</style>

